<!-- 
  自定义指令

    除了官方内置的指令之外，还提供了API给到我们能够自定义一些指令

    核心：
      操作DOM

    分类：
      1. 全局自定义指令
        Vue2:
          Vue.directive(指令的名字，指令的配置对象)

        Vue3:
          app.directive(指令的名字，指令的配置对象)
      2. 局部自定义指令
        directives: {

        }
    
    指令的钩子函数：
      Vue2: 
        1. bind
        2. inserted
        3. update
        4. componentUpdated
        5. unbind
      Vue3:
        1. created
        2. beforeMount
        3. mounted
        4. beforeUpdate
        5. updated
        6. beforeUnmount
        7. unmounted

    指定钩子函数会接受到的参数介绍：
        1. el
          元素的DOM对象
        2. binding
          绑定指令时传递的参数、修饰符、value值等内容
          1. value
          2. oldValue
          3. arg
          4. modifiers
          5. instance
          6. dir
        3. vnode
        4. prevVnode

 -->

<template>
  <div>
    <div class="demo">
      <button @click="msg += '~'">{{ msg }}</button>
      <hr />
      <input type="text" v-focus="msg" value="hello" />

      <p class="p">张三</p>
      <p class="p" v-visibe="show">18</p>
      <p class="p">男</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello',
      show: false
    }
  },

  directives: {
    // key: 指令的名字，不需要 v- 开头
    // value:
    //      1. 一个包含有指令钩子函数的对象
    //      2. 一个函数：就相对与 mounted 与 updated 的简写形式

    focus: {
      /**
       * 指令所在元素的组件挂载到DOM上时触发
       */
      mounted(el, binding) {
        console.log('mounted', el.value)
        console.log(document.querySelector('#app').innerHTML)

        el.focus()
      },

      /**
       * 指令所在元素的组件挂载到页面之前触发
       */
      beforeMount(el, binding) {
        console.log('beforeMount', el.value)
        console.log(document.querySelector('#app').innerHTML)

        // el.focus()
      },

      /**
       * 指令所在元素的组件发生更新时触发
       */
      updated(el, { value, oldValue }) {
        console.log('updated', value, oldValue)
      },

      /**
       * 指令所在元素的组件发生卸载时触发
       * 收尾的事情
       */
      unmounted() {}
    },

    /**
     * v-visibe="xxx"
     */
    // visibe: {
    //   mounted(el, binding) {
    //     // 触发就是，mounted 与 updated

    //     if (!binding.value) {
    //       el.style.visibility = 'hidden'
    //     } else {
    //       el.style.visibility = 'visible'
    //     }
    //   },

    //   updated(el, binding) {
    //     // 触发就是，mounted 与 updated

    //     if (!binding.value) {
    //       el.style.visibility = 'hidden'
    //     } else {
    //       el.style.visibility = 'visible'
    //     }
    //   }
    // }
    visibe(el, binding) {
      // 触发就是，mounted 与 updated

      if (!binding.value) {
        el.style.visibility = 'hidden'
      } else {
        el.style.visibility = 'visible'
      }
    }
  }
}
</script>

<style>
.p {
  height: 36px;
  line-height: 36px;
}

.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
  /* transform: translateX(100px); */

  filter: grayscale(1);
}

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
